<template>
  <div id="container"></div>
</template>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=eab3b9f7d02e4e27ea39c4145a357304&plugin=Map3D,AMap.DistrictSearch"></script> 
<script language="javascript">
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          lat: "",
          lng: "",
          address: "",
        };
      },
    },
    mapVisible: {
      type: Boolean,
    },
  },
  watch: {
    mapVisible: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        // console.log(val, oldVal);
        this.initMap();
      },
      deep: true, //true 深度监听
    },
  },
  created() {
    // console.log(this.data);
  },
  methods: {
    // 实例化地图
    initMap() {
      let center = [];
      // console.log(11)
      if (this.data.lng != null && this.data.lat != null) {
        center = [this.data.lng, this.data.lat];
      } else {
        center = [120.54496, 36.222742];
      }
      // console.log(center);
      let _this = this;
      var opts = {
        subdistrict: 0,
        extensions: "all",
        level: "city",
      };
      //利用行政区查询获取边界构建mask路径
      //也可以直接通过经纬度构建mask路径
      var district = new AMap.DistrictSearch(opts);
      district.search("青岛市", function (status, result) {
        var bounds = result.districtList[0].boundaries;
        var mask = [];
        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]]);
        }
        var map = new AMap.Map("container", {
          center: center,
          // disableSocket: true,
          // // viewMode: "3D",
          // showLabel: false,
          // labelzIndex: 130,
          // pitch: 40,
          mapStyle: "amap://styles/light",
          zoom: 14,
          // layers: [
          //   new AMap.TileLayer.RoadNet({
          //     //rejectMapMask:true
          //   }),
          //   new AMap.TileLayer.Satellite(),
          // ],
        });
        if(_this.data.address!=null){
          var marker = new AMap.Marker({
            position: center,
            // icon: startIcon,
            map: map,
          });
          marker.setLabel({
            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          });

        }
        var geocoder = new AMap.Geocoder({
          // city: "010", //城市设为北京，默认：“全国”
          // radius: 1000 //范围，默认：500
        });
        var clickEventListener = map.on("click", function (e) {
          // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
          // console.log( e);
          var coordinate = e.lnglat.getLng() + "," + e.lnglat.getLat();
          // regeoCode(coordinate);
          geocoder.getAddress(coordinate, function (status, result) {
            // console.log(status, result);
            if (status === "complete" && result.regeocode) {
              var address = result.regeocode.formattedAddress;
              // console.log(address);
              let form = {
                lng: e.lnglat.getLng(),
                lat: e.lnglat.getLat(),
                address: address,
              };
              // $("#md_addr").val(address);
              _this.$emit("mapChange", form);
            } else {
              log.error("根据经纬度查询地址失败");
            }
          });
          // var autoComplete = new AMap.Autocomplete(autoOptions);
          // autoComplete.search(keyword, function (status, result) {
          //   // 搜索成功时，result即是对应的匹配数据
          // });
        });
      });
    },
  },
  async mounted() {
    this.initMap();
  },
};
</script>
<style>
body,
html,
#container {
  margin: 0;
  width: 100%;
  height: 110%;
}
.info {
  background: rgba(0, 255, 211, 0.5);
  color: #ffffff;
  padding: 5px 7px;
}
.amap-marker-label {
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
.amap-info-content {
  background-color: rgba(9, 59, 118, 0.85);
  /* opacity: 0.75; */
  /* background-color: #42a9ff; */
  border: 1px solid #42a9ff;
  color: white;
}
.amap-info-close {
  top: 1px;
  right: 2px !important;
}
</style>
